<template>
  <div class="dashboard-page">
<!--    <Row :gutter="20">-->
<!--      <Col :xs="24" :sm="24" :md="12" :lg="6">-->
<!--        <cardInfo id="income" :icon="icons.icon1" title="总收入" :value="953000" class="margin"/>-->
<!--      </Col>-->
<!--      <Col :xs="24" :sm="24" :md="12" :lg="6">-->
<!--        <cardInfo id="out" :icon="icons.icon2" title="总支出" :value="236000" class="margin"/>-->
<!--      </Col>-->
<!--      <Col :xs="24" :sm="24" :md="12" :lg="6">-->
<!--        <cardInfo id="order" :icon="icons.icon3" title="订单总数" :value="987563" class="margin"/>-->
<!--      </Col>-->
<!--      <Col :xs="24" :sm="24" :md="12" :lg="6">-->
<!--        <cardInfo id="users" :icon="icons.icon4" title="会员总数" :value="987563" class="margin"/>-->
<!--      </Col>-->
<!--    </Row>-->

    <Row :gutter="20">
      <Col :xs="24" :sm="24" :md="12" :lg="6">
        <cardBar
            id="income"
            title="总收入"
            :value="25134"
            prefix="￥"
            compare="1.08%"
            class="margin"
        />
      </Col>
      <Col :xs="24" :sm="24" :md="12" :lg="6">
        <cardArea
            id="out"
            title="总支出"
            :value="3456"
            status="down"
            compare="0.83%"
            class="margin"
        />
      </Col>
      <Col :xs="24" :sm="24" :md="12" :lg="6">
        <cardRadial
            id="order"
            title="订单总数"
            :value="35268"
            status="down"
            compare="6.13%"
            class="margin"
        />
      </Col>
      <Col :xs="24" :sm="24" :md="12" :lg="6">
        <cardLine
            id="users"
            title="用户增长"
            :value="13.68"
            :decimalPlaces="2"
            prefix="+"
            compare="10.68%"
            suffix="%"
            class="margin"
        />
      </Col>
    </Row>

    <Row :gutter="20">
      <Col :xs="24" :sm="24" :lg="24" :xl="12">
        <LineChart class="margin"/>
      </Col>
      <Col :xs="24" :sm="24" :lg="24" :xl="12">
        <bar class="margin"/>
      </Col>
    </Row>
    <Row :gutter="20">
      <Col :xs="24" :sm="24" :lg="24" :xl="16">
        <mapCard class="margin"/>
      </Col>
      <Col :xs="24" :sm="24" :lg="24" :xl="8">
        <radar class="margin"/>
      </Col>
    </Row>

  </div>
</template>

<script>
import cardInfo from "./components/cardInfo.vue";
import LineChart from "./components/line.vue";
import bar from "./components/bar.vue";
import mapCard from "./components/mapCard.vue";
import radar from "./components/radar.vue";
import cardBar from "./components/cardBar.vue";
import cardArea from "./components/cardArea.vue";
import cardRadial from "./components/cardRadial.vue";
import cardLine from "./components/cardLine.vue";
import cardButton from "./components/cardButton.vue";
import cardProgress from "./components/cardProgress.vue";
import orderTable from "./components/orderTable.vue";
export default {
  //tag标签
  name: "财务系统",
  components: {
    cardInfo,
    LineChart,
    bar,
    mapCard,
    radar,
    cardBar,
    cardArea,
    cardRadial,
    cardLine,
    cardButton,
    cardProgress,
    orderTable,
  },
  data() {
    return {
      icons: {
        icon1: require("@/assets/dashboard/fee.png"),
        icon2: require("@/assets/dashboard/department.png"),
        icon3: require("@/assets/dashboard/console.png"),
        icon4: require("@/assets/dashboard/user.png")
      }
    };
  },
  methods: {
    init() {}
  },
  mounted() {
    this.init();
  }
};
</script>
<style lang="less" scoped>
.dashboard-page {
  .margin {
    margin-bottom: 20px;
  }
}
</style>